<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主界面</title>
    <script>
        var anser =
            prompt('请输入访问密码：');
        if (anser == '1234') {
            alert('欢迎小主登录！！')
        } else {
            // 关闭网页
            alert('不好意思哦，密码输入有误，您不可以访问哦')
            window.close()
        }
    </script>
    <style>
        /* 路径更换 */
                
        /* @font-face {
            font-family: 'icomoon';
            src: url('./fonts/icomoon.eot?qg5k3');
            src: url('./fonts/icomoon.eot?qg5k3#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?qg5k3') format('truetype'), url('fonts/icomoon.woff?qg5k3') format('woff'), url('fonts/icomoon.svg?qg5k3#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        } */
        
        * {
            margin: 0;
            padding: 0;
            /* list-style: none; */
            text-decoration: none;
            box-sizing: border-box;
        }
        /* 快捷导航模块 */
        
        .shortcut {
            background-color: #f5f5f5;
        }
        
        .w {
            margin: 0 auto;
            width: 1100px;
            height: 28px;
            line-height: 28px;
        }
        
        .fl {
            float: left;
            /* margin-left: 100px; */
        }
        
        .fl p {
            color: #333333;
        }
        
        p::after {
            content: "▾";
        }
        
        .fr {
            float: right;
            text-align: center;
        }
        
        .fr ul li a {
            color: #666;
        }
        
        ul li {
            display: inline-block;
        }
        
        .k {
            /* float: left; */
            width: 60px;
            height: 25px;
            text-align: center;
            background-color: green;
        }
        
        .fr>ul>li {
            margin-right: 6px;
        }
        
        a {
            color: #666;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: small;
            font-weight: 700;
        }
        
        .triangle::after {
            content: "▾";
        }
        /* 头部制作 */
        
        header {
            height: 100px;
            width: 1100px;
            margin: 0 auto;
            background-color: rgb(255, 255, 255);
            position: relative;
        }
        
        img {
            /* width: 100px; */
            height: 100px;
            /* position: absolute;
            top: 0px; */
        }
        
        .x {
            position: absolute;
            left: 220px;
        }
        
        .search {
            width: 360px;
            height: 34px;
            border: #fa2a83 2px solid;
            position: absolute;
            top: 30px;
            left: 631px;
        }
        
        button,
        input {
            /* input默认边款去掉 */
            border: 0;
            outline: none;
        }
        
        .search input {
            float: left;
            width: 300px;
            height: 29px;
            padding-left: 10px;
        }
        
        .search button {
            float: left;
            width: 56px;
            height: 32px;
            background-color: #fa2a83;
            font-size: 14px;
            color: rgb(255, 255, 255);
        }
        
        .hotwords {
            position: absolute;
            top: 65px;
            left: 650px;
        }
        
        .col {
            color: #fa2a83;
        }
        /* 购物车 */
        
        .shopcar {
            width: 100px;
            height: 32px;
            border: solid 1px rgb(173, 171, 171);
            background-color: #ebecec;
            position: absolute;
            top: 30px;
            left: 1000px;
            line-height: 32px;
            text-align: center;
        }
        
        .count {
            height: 5px;
            padding: 0 6px;
            border-radius: 6px;
            color: white;
            background-color: #fa2a83;
            font-style: normal;
            font-size: small;
        }
        /* nae制作 */
        
        .nav {
            height: 40px;
            /* position: relative; */
            /* border-bottom: 2px solid black; */
        }
        
        .triangle ul li {
            float: left;
            /* display: none; */
        }
        
        .dopdown {
            float: left;
            width: 150px;
            height: 43px;
            background-color: #fa2a83;
        }
        
        .navitems {
            float: left;
            width: 950px;
            height: 43px;
        }
        /* .navitems>ul {
            margin-bottom: -48px;
        } */
        
        .dt {
            width: 100%;
            height: 100%;
            color: white;
            text-align: center;
            line-height: 40px;
        }
        
        .xs {
            display: none;
        }
        
        .dt ul li {
            width: 100%;
            height: 50px;
            line-height: 31px;
            /* padding-left: 20px; */
            background-color: #fa2a83;
            line-height: 50px;
            text-align: center;
            position: relative;
            z-index: 1000;
        }
        
        .dt ul li {
            display: none;
        }
        
        .dt:hover ul li {
            display: block;
        }
        
        ul li:hover {
            background-color: white;
        }
        
        .dt:hover ul {
            display: block;
        }
        
        ul li a {
            font-size: 14px;
            color: rgb(255, 255, 255);
        }
        
        ul li:hover a {
            font-size: 14px;
            color: #fa2a83;
        }
        
        .navitems ul {
            position: absolute;
            margin-top: -20px;
        }
        
        .navitems ul li {
            margin-left: 15px;
        }
        
        .navitems ul li a {
            padding: 10px;
            font-size: 16px;
            /* margin-top: 10px; */
            color: rgb(56, 55, 55);
        }
        
        .navitems ul li:hover a {
            color: #fa2a83;
        }
        
        .more ul li {
            /* display: none; */
            text-align: center;
            width: 80px;
            height: 40px;
        }
        /* 底部模块制作 */
        
        .footer {
            position: relative;
            height: 800px;
            background-color: white;
            padding-top: 30px;
        }
        /* .mod_service {
            height: 90px;
            border-bottom: 1px solid black;
        } */
        
        .tubiao {
            /* height: 300px; */
            margin-top: -20px;
        }
        
        .s_box {
            float: left;
            width: 150px;
            height: 165px;
            margin-right: 30px;
            border-right: lavender 1px solid;
            /* background-color: hotpink; */
        }
        
        .s_box ul li {
            padding: 0 10px;
            list-style: square;
            font-size: 12px;
        }
        
        .pinks {
            position: absolute;
            top: 300px;
            width: 990px;
            height: 30px;
            background-color: #fa2a83;
            margin-left: 20px;
        }
        
        .pinks {
            text-align: center;
        }
        
        .pinks a {
            color: white;
            border-right: solid 1px;
            padding-right: 20px;
            /* text-align: center; */
            /* margin-left: 8px; */
        }
        
        .stext {
            position: absolute;
            top: 340px;
            width: 990px;
            height: 120px;
            padding: 8px;
            /* background-color: lavenderblush; */
        }
        
        .stext p {
            font-size: 12px;
            text-align: center;
        }
        /* 主体部分 */
        
        main {
            background-color: #ffa202;
        }
        
        .img {
            width: auto;
            height: 380px;
            background: url(./imges/版型图片.jpg) no-repeat center;
        }
        
        .num2 {
            width: 1050px;
            margin: auto;
            margin-top: 50px;
            margin-bottom: 50px;
            /* height: 400px; */
        }
        
        .num2 img {
            display: block;
            width: 1000px;
            height: 401px;
            margin: 0 auto;
        }
        /* 中进部分 */
        
        .box-bd ul {
            width: 1050px;
            margin: auto;
        }
        
        .box-bd ul li {
            /* float: left; */
            width: 238px;
            height: 432px;
            background-color: rgb(241, 241, 241);
            margin-left: 20px;
            margin-bottom: 15px;
        }
        
        .box-bd ul li img {
            width: 100%;
            height: 219px;
        }
        
        .clearfix {
            margin-left: 100px;
        }
        
        .clearfix li {
            box-sizing: border-box;
        }
        
        .clearfix li:hover {
            box-shadow: 0px 4px 8px;
        }
        
        .box-bd ul li h4 {
            width: 194px;
            height: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /* 溢出省略号代替 */
            text-align: center;
            margin: 20px 20px 20px 25px;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            margin: 48px 22px 0;
        }
        
        .box-bd ul li p {
            width: 238px;
            height: 33px;
            text-align: center;
            color: #f10180;
            font-size: 18px;
            margin-top: 20px;
        }
        
        .info {
            width: 129px;
            height: 28px;
            border: 1px solid #f10180;
            color: #F10180;
            text-align: center;
            line-height: 28px;
            font-family: MicrosoftYaHei;
            margin-top: 20px;
            margin-left: 50px;
        }
        
        .info:hover {
            background-color: #f10180;
            color: white;
        }
        /* 侧边导航栏 */
    </style>
</head>

<body>

    <!-- 快捷导航 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <p>长治市 </p>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">请登录</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#">注册</a></li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li><a href="#">/签到有礼</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle">我的特卖                     
                    </a>

                    </li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle ">会员俱乐部</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle ">客户服务</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#">手机版</a></li>
                    <li><a href="#">/</a></li>
                    <li><a href="#" class="triangle ">更多</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 头部模块 -->
    <header class="header ">
        <div class="logo">
            <img src="./imges/logo.png" alt="">
            <img src="./imges/lougou部分.jpg" alt="" class="x">
        </div>
        <div class="search"><input type="search" name="" id="" placeholder="国庆特卖 用券立省"> <button>搜索</button></div>
        <!-- 搜索框下下小模块制作 -->
        <div class="hotwords">
            <a href="#" class="col">精选大牌必推荐 </a>
            <a href="#"> | 安踏ANTA | </a>
            <a href="#">耐克Nike | </a>
            <a href="#">护肤套装 </a>
        </div>
        <!-- 搜索框下下小模块制作 -->
        <!-- 购物车模块 -->
        <div class="shopcar">购物袋 <span class="count">0</span>
            <!-- <i class="count">0</i> -->
        </div>
        <!-- 购物车模块 -->
    </header>
    <!-- 头部模块 -->
    <!-- <nav标签制作 -->
    <nav class="nav">
        <div class="w">
            <div class="dopdown">
                <div class="dt">全部商品
                    <ul>
                        <li>
                            <a href="#">女装/男装/内衣</a>
                        </li>
                        <li>
                            <a href="#">女鞋/男鞋/箱包</a>
                        </li>
                        <li>
                            <a href="#">护肤彩妆/个护</a>
                        </li>
                        <li>
                            <a href="#">运动户外</a>
                        </li>
                        <li>
                            <a href="#">家电数码</a>
                        </li>
                        <li>
                            <a href="#">母婴童装</a>
                        </li>
                        <li>
                            <a href="#">手表配饰</a>
                        </li>
                        <li>
                            <a href="#">居家用品</a>
                        </li>
                        <li>
                            <a href="#">唯品生活</a>
                        </li>
                        <li>
                            <a href="#">医药健康</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="navitems">
            <ul>
                <li><a href="#">推荐</a></li>
                <li><a href="#">三折疯抢</a></li>
                <li><a href="./唯品快抢.html">唯品快抢</a></li>
                <li><a href="#">唯品奥莱</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">运动</a></li>
                <li><a href="#">鞋包</a></li>
                <li><a href="./美妆.html">美妆</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">男装</a></li>
                <li><a href="#">首饰</a></li>
                <li class="xs"><a href="#">更多</a>
                    <div class="more">
                        <ul>
                            <li><a href="#">内衣</a></li>
                            <li><a href="#">百货</a></li>
                            <li><a href="#">食品</a></li>
                            <li><a href="#">家纺</a></li>
                        </ul>
                </li>
            </ul>
            </div>
        </div>
    </nav>
    <!-- 主体部分 -->
    <div class="m">
        <main>
            <div class="img"></div>
            <div class="num2">
                <img src="./imges/超级大牌小图.png" alt="">
            </div>
            <!-- 推荐部分 -->

            <div class="box-bd">
                <ul class="clearfix">
                    <li>
                        <img src="./imges/1.webp" alt="">
                        <h4>韩国后The History of Whoo护肤彩妆专场</h4>
                        <p>7.3折起</p>

                        <div class="info">
                            立即抢购
                        </div>
                    </li>
                    <li>
                        <img src="./imges/2.webp" alt="">
                        <h4>悦诗风吟Innisfree护肤彩妆专场</h4>
                        <p>7.3折起</p>
                        <div class="info">立即抢购
                        </div>
                    </li>
                    <li>
                        <img src="./imges/3.webp" alt="">
                        <h4>花西子彩妆香水专场</h4>
                        <p>7.3折起</p>
                        <div class="info">立即抢购
                        </div>
                    </li>
                    <li>
                        <img src="./imges/4.webp" alt="">
                        <h4>SK-II美容护肤专场</h4>
                        <p>7.3折起</p>
                        <div class="info">立即抢购
                        </div>
                    </li>
                    <li>
                        <img src="./imges/5.webp" alt="">
                        <h4>迪奥Dior护肤彩妆专场</h4>
                        <p>7.2折起 </p>
                        <div class="info">立即抢购
                        </div>
                    </li>
                    <li><img src="./imges/6.webp" alt="">
                        <h4>迪奥Dior护肤彩妆专场</h4>
                        <p>7.3折起</p>
                        <div class="info">立即抢购
                        </div>
                    </li>
                    <li>
                        <img src="./imges/7.webp" alt="">
                        <h4>珂拉琪COLORKEY彩妆香水专场</h4>
                        <p>7.3折起</p>
                        <div class="info">立即抢购
                        </div>
                    </li>
                    <li><img src="./imges/8.webp" alt="">
                        <h4>芙丽芳丝freeplus美容护肤专场</h4>
                        <p>7.3折起</p>
                        <div class="info">立即抢购
                        </div>
                    </li>

                </ul>
            </div>
        </main>


        <!-- 底部模块制作 -->
        <footer class="footer">
            <div class="w">
                <div class="mod_service">
                    <div class="tubiao"><img src="./imges/底部标签.png" alt=""></div>
                </div>
                <div class="bigbox">
                    <div class="s_box">
                        <ul>
                            <li>
                                <h5>正品保障</h5>
                            </li>
                            <li>7天无理由退化</li>
                            <li>12小时客服服务</li>
                            <li>7天无理由随心换</li>
                        </ul>
                    </div>

                    <div class="s_box">
                        <ul>
                            <li>
                                <h5>支付方式</h5>
                            </li>
                            <li>23家主流银行</li>
                            <li>支付宝、银联等支付</li>
                            <li>信用卡支付</li>
                            <li>零钱支付</li>
                        </ul>
                    </div>
                    <div class="s_box">
                        <ul>
                            <li>
                                <h5>支付方式</h5>
                            </li>
                            <li>23家主流银行</li>
                            <li>支付宝、银联等支付</li>
                            <li>信用卡支付</li>
                            <li>零钱支付</li>
                        </ul>
                    </div>
                    <div class="s_box">
                        <ul>
                            <li>
                                <h5>配送方式</h5>
                            </li>
                            <li>配送范围及运费</li>
                            <li>验货与签收</li>
                        </ul>
                    </div>
                    <div class="s_box">
                        <ul>
                            <li>
                                <h5>售后服务</h5>
                            </li>
                            <li>退货政策</li>
                            <li>退货流程</li>
                            <li>退款方式和时效</li>
                            <li>换货服务</li>
                        </ul>
                    </div>
                    <div class="s_box">
                        <ul>
                            <li>
                                <h5>唯品会APP二维码</h5>
                            </li>
                            <li> <img src="./imges/二维码.png" alt=""> </li>
                            <li>下载唯品会移动APP</li>
                        </ul>
                    </div>
                </div>
                <div class="pinks">
                    <div class="spinks"> <a href="#">关于我们</a>
                        <a href="#">About us</a>
                        <a href="#">Investor Relation</a>
                        <a href="#">媒体报道</a>
                        <a href="#">品牌招商</a>
                        <a href="#">隐私条款</a>
                        <a href="#">唯品诚聘</a>
                        <a href="#">唯品卡</a>
                        <a href="#">联系我们</a>
                        <a href="#">廉正举报</a></div>
                </div>
                <div class="stext">
                    <p>Copyright © 2008-2021 vip.com，All Rights Reserved 使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司<br> 粤公网安备 44010302111111号 粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2018〕5030-1743号<br> 经营主体证照 风险监测信息 互联网药品信息服务资格证书：（粤）-经营性-2018-0271
                        网络食品交易第三方平台备案br 凭证：粤B2-20170777 医疗器械网络交易服务第三方平台备案凭证：（粤）网械平台备字[2019]第00001号 出版物网络交易平台服务经营备案证：粤新出网备（2021）1号 未成年人关怀专区<br> 违法和不良信息举报电话：4006789888；举报邮箱：privacy@vipshop.com
                    </p>
                </div>

        </footer>
        </div>
        <!-- 底部模块制作 -->
    </div>
</body>

</html>